<style lang="scss" scoped>
$btn-color: #2d8cf0;
$btn-bg-color: black;
$btn-bef-size: -35px;
@function sample($list) {
  @return nth($list, random(length($list)));
}
@function bubbles($color, $count: 16) {
  $bubbles: ();
  // define your own bubbles here!
  $bubble-types: (
    radial-gradient(circle, $color 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, $color 20%, transparent 30%)
  );
  @for $i from 1 through $count {
    $bubbles: append($bubbles, sample($bubble-types), comma);
  }
  @return $bubbles;
}
@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}
@function random_sizes($count: 16) {
  $sizes: ();
  @for $i from 1 through $count {
    $sizes: append(
      $sizes,
      (random_range(5, 10) * 1%) (random_range(15, 25) * 1%),
      comma
    );
  }
  @return $sizes;
}
@function random_positions($count: 16) {
  $positions: ();
  @for $i from 1 through $count {
    $x: random_range(10, 90) * 1%;
    $y: random_range(30, 70) * 1%;
    @if $x < 90% and $x > 10% {
      $bubble-positions-y: (30%, 70%);
      $y: sample($bubble-positions-y);
    }
    $positions: append($positions, ($x) ($y), comma);
  }
  @return $positions;
}

.btn-container {
  display: flex;
}
.btn {
  flex-grow: 1;
  position: relative;
  padding: 0.65rem 1.5rem;
  font-size: 0.5rem;
  font-family: Lato, sans-serif;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  background-color: $btn-bg-color;
  border: 1px solid $btn-bg-color;
  border-radius: 4px;
  box-shadow: 0 0.1px 0.7px rgba(3, 51, 103, 0.141),
    0 0.1px 1.7px rgba(3, 61, 121, 0.202), 0 0.3px 3.1px rgba(7, 78, 151, 0.25),
    0 0.4px 5.6px rgba(7, 100, 181, 0.298),
    0 0.8px 10.4px rgba(9, 108, 212, 0.359), 0 2px 25px rgba(15, 125, 239, 0.5);
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;
}
.btn-buddles {
  overflow: visible;
  transition: transform ease-in 0.1s, background-color ease-in 0.1s,
    box-shadow ease-in 0.25s;
  &::before {
    position: absolute;
    color: black;
    content: "";
    left: $btn-bef-size;
    right: $btn-bef-size;
    top: $btn-bef-size;
    bottom: $btn-bef-size;
    transition: ease-in-out 0.5s;
    background-repeat: no-repeat;

    background-image: bubbles($btn-color);
    background-size: random_sizes();
    background-position: 10% 50%, 10% 30%, 30% 30%, 40% 30%, 50% 30%, 60% 30%,
      70% 30%, 90% 30%, 80% 50%, 20% 70%, 30% 70%, 40% 70%, 50% 70%, 60% 70%,
      70% 70%, 80% 70%;
    // background-position: random_positions();
    // animation: bubbles ease-in-out 0.75s forwards;
  }
  &:active {
    transform: scale(0.9);
    background: $btn-color;

    &::before {
      // when the clicked mouse is up, trigger the animation.
      animation: none;
      background-size: 0;
    }
  }
}

@keyframes bubbles {
  0% {
    background-position: 20% 50%, 20% 30%, 30% 30%, 40% 30%, 50% 30%, 60% 30%,
      70% 30%, 80% 30%, 80% 50%, 20% 70%, 30% 70%, 40% 70%, 50% 70%, 60% 70%,
      70% 70%, 80% 70%;
  }

  50% {
    background-position: 10% 60%, 10% 30%, 26% 15%, 40% 15%, 50% 15%, 60% 15%,
      70% 15%, 80% 15%, 90% 50%, 10% 85%, 30% 85%, 40% 85%, 50% 85%, 60% 85%,
      70% 85%, 80% 85%;
  }

  100% {
    background-position: 0% 70%, 0% 30%, 22% 0%, 40% 0%, 50% 0%, 60% 0%, 70% 0%,
      80% 0%, 100% 50%, 0% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%,
      70% 100%, 80% 100%;
    background-size: 0% 0%;
  }
}
</style>
<template>
  <div class="btn-container">
    <button class="btn btn-buddles">Click Me</button>
  </div>
</template>

<script>
export default {
  props: {},
  methods: {},
  mounted() {},
};
</script>
